<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <style>
        .calculator {
            width: 300px;
            margin: 50px auto;
            padding: 15px;
            border: 2px solid #333;
            border-radius: 8px;
            text-align: center;
        }
        .calculator h1 {
            margin-top: 0;
            color: #333;
        }
        #result {
            width: 90%;
            height: 40px;
            margin-bottom: 15px;
            padding: 0 10px;
            font-size: 18px;
            text-align: right;
        }
        .keys {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            height: 50px;
            font-size: 18px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>简单计算器</h1>
        <input type="text" id="result" readonly>
        <div class="keys">
            <button onclick="appendNum('7')">7</button>
            <button onclick="appendNum('8')">8</button>
            <button onclick="appendNum('9')">9</button>
            <button onclick="setOperator('+')">+</button>
            
            <button onclick="appendNum('4')">4</button>
            <button onclick="appendNum('5')">5</button>
            <button onclick="appendNum('6')">6</button>
            <button onclick="setOperator('-')">-</button>
            
            <button onclick="appendNum('1')">1</button>
            <button onclick="appendNum('2')">2</button>
            <button onclick="appendNum('3')">3</button>
            <button onclick="setOperator('*')">*</button>
            
            <button onclick="appendNum('0')">0</button>
            <button onclick="calculate()">=</button>
            <button onclick="setOperator('/')">/</button>
        </div>
    </div>

    <script>
        let result = document.getElementById('result');
        let currentNum = '';
        let prevNum = '';
        let operator = '';

        // 输入数字
        function appendNum(num) {
            currentNum += num;
            result.value = currentNum;
        }

        // 选择运算符
        function setOperator(op) {
            if (currentNum === '') return;
            if (prevNum !== '') {
                calculate(); // 连续运算时自动计算前一次结果
            }
            operator = op;
            prevNum = currentNum;
            currentNum = '';
        }

        // 计算结果
        function calculate() {
            if (currentNum === '' || prevNum === '' || operator === '') return;
            let num1 = parseFloat(prevNum);
            let num2 = parseFloat(currentNum);
            let res;

            switch(operator) {
                case '+':
                    res = num1 + num2;
                    break;
                case '-':
                    res = num1 - num2;
                    break;
                case '*':
                    res = num1 * num2;
                    break;
                case '/':
                    if (num2 === 0) {
                        res = '错误';
                    } else {
                        res = num1 / num2;
                    }
                    break;
                default:
                    return;
            }

            result.value = res;
            currentNum = res.toString();
            prevNum = '';
            operator = '';
        }
    </script>
</body>
</html>